<html lang="en">
<head>
    <title>注册地区管理</title>
<#include  "../common/header.ftl">
    <link rel="stylesheet" href="/js/plugins/treeview/bootstrap-treeview.min.css" type="text/css"/>
    <script type="text/javascript" src="/js/plugins/treeview/bootstrap-treeview.min.js"></script>


    <script>
        //当页面加载完成时
        $(function () {
            $.get("/region/getRegionByParentId.do", function (data) {
                $("#treeview").treeview({
                    color: "#428bca",
                    showTags: true,//显示标签
                    data: [{
                        text: "全部地区",
                        nodes: data
                    }],
                    //步骤1:点击 + 图标 , 触发事件
                    //node表示当前点击的节点
                    lazyLoad: function (node) {
                        //步骤2: 发起ajax请求加载子节点
                        $.get("/region/getRegionByParentId.do", {parentId: node.id}, function (subData) {
                            //参数1:addNode 添加节点方法, 固定不能乱改
                            //参数2:参数列表,位置1:放置要添加的节点 位置2:放置父节点
                            $("#treeview").treeview('addNode', [subData, node])
                        });
                    },
                    //节点选择监听事件,去查询该节点下所有子节点,然后拼接右边列表中
                    onNodeSelected: function (event, node) {
                        //查询数据
                        $.get("/region/getRegionByParentId.do", {parentId: node.id}, function (subData) {
                            var html = "";
                            //index循环的次数
                            $.each(subData, function (index, item) {
                                html += "<tr><td>" + (index + 1) + "</td><td>" + item.text + "</td>" +
                                        "<td><a class = 'btn btn-info btn-xs editBtn' href = 'javascript:;' data-json='" + item.jsonString + "'>"
                                        + "<span class = 'glyphicon glyphicon-pencil'></span>编辑</a ></td></tr>";
                            })
                            $("#tbody").html(html);
                        })
                    }
                });
            })
            //点击编辑按钮弹出拟态框
            //动态绑定,在触发点击事件时,根据选中标签动态绑定事件
            $(".container").on("click", ".editBtn", function () {
                //当拟态框有值是编辑操作
                var json = $(this).data("json");
                console.log(json);
                if (json) {
                    $("#editForm input[name='parent.name']").val(json.parentName);
                    $("#editForm input[name='parent.id']").val(json.parentId);
                    $("#editForm input[name='name']").val(json.name);
                    $("#editForm select[name='state']").val(json.state);
                    $("#editForm input[name='id']").val(json.id);
                } else {
                    //添加操作,上级地区节点
                    var node = $("#treeview").treeview('getSelected')[0];
                    console.log(node);
                      if (node) {

                        $("#editForm input[name='parent.name']").val(node.text);
                        $("#editForm input[name='parent.id']").val(node.id);
                    }
                }
                $("#editModal").modal("show");
            })

            $("#saveBtn").click(function () {
                //普通的表单提交
                $("#editForm").submit();
            })
        })
    </script>
</head>
<body>
<!--左侧菜单回显变量设置-->
<#assign currentMenu='region'>


<div class="container " style="margin-top: 20px">
<#include  "../common/top.ftl">
    <div class="row">
        <div class="col-sm-2">
        <#include  "../common/menu.ftl">
        </div>
        <div class="col-sm-10">
            <h1 class="page-head-line">地区管理</h1>
            <div class="form-group" style="margin-left: 20px">
                <a href="javascript:;" class="btn btn-success editBtn" id="addRegionBtn">添加地区</a>
            </div>
            <div class="row">
                <div class="col-sm-4">
                    <div id="treeview">

                    </div>
                </div>
                <div class="col-sm-8">
                    <table class="table table-striped table-hover">
                        <thead>
                        <tr>
                            <th>编号</th>
                            <th>地区名称</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody id="tbody">

                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
<#--模态框-->
    <div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title titleName">地区添加/编辑</h4>
                </div>
                <div class="modal-body">
                    <!--模态框的内容-->
                    <form class="form-horizontal" id="editForm" action="/region/saveOrUpdate.do" method="post">
                        <input type="hidden" name="id"/>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">上级地区</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" readonly name="parent.name"/>
                                <input type="hidden" class="form-control" readonly name="parent.id"/>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-2 control-label">地区名称</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" name="name" placeholder="请输入地区的名称"
                                       style="width: 200px">
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-2 control-label">地区状态</label>
                            <div class="col-sm-8">
                                <select name="state" class="form-control">
                                    <option value="0">正常</option>
                                    <option value="1">推荐</option>
                                </select>
                            </div>
                        </div>

                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" id="saveBtn">保存</button>
                </div>
            </div>
        </div>
    </div>
</body>
</html>